<template>
	<view class="page">
		<!-- <u-sticky> -->
		<view class="Filter" style="width: 750rpx;">
			<!-- <van-dropdown-menu>
				<van-dropdown-item v-model="value1" :options="option1" />
				<van-dropdown-item v-model="value2" :options="option2" />
			</van-dropdown-menu> -->
		</view>
		<!-- </u-sticky> -->
		<view style="width: 100%;height: 20rpx;">

		</view>
		<view class="content">
			<view class="item">
				<view class="item-top">信息技术及人工智能国家标准制定技术服务采购结果公告</view>
				<view class="item-content">
					<view class="item-state">商业服务</view>
					<view class="item-state1">资质</view>
				</view>
				<view class="item-bottom">
					<view class="item-bottom-yuan">
						<image src="../../static/img/z5421@2x.png" mode=""></image>
						<view class="yuan">1万元</view>
					</view>
					<view class="item-bottom-city">
						<image src="../../static/img/lj4960@2x.png" mode=""></image>
						<view class="city">北京</view>
					</view>
					<view class="item-bottom-time">
						<image src="../../static/img/z6877@2x.png" mode=""></image>
						<view class="time">2024-04-01</view>
					</view>
				</view>
				<view class="item-heng">
					<view class="heng"></view>
				</view>
				<view class="item-btn">
					<view class="qxsc" @click="click()">取消收藏</view>
				</view>
			</view>

			<view class="item">
				<view class="item-top">信息技术及人工智能国家标准制定技术服务采购结果公告</view>
				<view class="item-content">
					<view class="item-state">商业服务</view>
					<view class="item-state1">资质</view>
				</view>
				<view class="item-bottom">
					<view class="item-bottom-yuan">
						<image src="../../static/img/z5421@2x.png" mode=""></image>
						<view class="yuan">1万元</view>
					</view>
					<view class="item-bottom-city">
						<image src="../../static/img/lj4960@2x.png" mode=""></image>
						<view class="city">北京</view>
					</view>
					<view class="item-bottom-time">
						<image src="../../static/img/z6877@2x.png" mode=""></image>
						<view class="time">2024-04-01</view>
					</view>
				</view>
				<view class="item-heng">
					<view class="heng"></view>
				</view>
				<view class="item-btn">
					<view class="qxsc" @click="click()">取消收藏</view>
				</view>
			</view>

			<view class="item">
				<view class="item-top">信息技术及人工智能国家标准制定技术服务采购结果公告</view>
				<view class="item-content">
					<view class="item-state">商业服务</view>
					<view class="item-state1">资质</view>
				</view>
				<view class="item-bottom">
					<view class="item-bottom-yuan">
						<image src="../../static/img/z5421@2x.png" mode=""></image>
						<view class="yuan">1万元</view>
					</view>
					<view class="item-bottom-city">
						<image src="../../static/img/lj4960@2x.png" mode=""></image>
						<view class="city">北京</view>
					</view>
					<view class="item-bottom-time">
						<image src="../../static/img/z6877@2x.png" mode=""></image>
						<view class="time">2024-04-01</view>
					</view>
				</view>
				<view class="item-heng">
					<view class="heng"></view>
				</view>
				<view class="item-btn">
					<view class="qxsc" @click="click()">取消收藏</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 0,
				value2: 'a',
				option1: [{
						text: '全部商品',
						value: 0
					},
					{
						text: '新款商品',
						value: 1
					},
					{
						text: '活动商品',
						value: 2
					}
				],
				option2: [{
						text: '默认排序',
						value: 'a'
					},
					{
						text: '好评排序',
						value: 'b'
					},
					{
						text: '销量排序',
						value: 'c'
					}
				]
			}
		},
		methods: {
			change() {

			},
			click() {
				console.log("888");
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-sticky {
		width: 750rpx;
		height: 88rpx;
	}

	::v-deep .van-dropdown-menu {
		width: 750rpx;
		height: 88rpx;
	}

	.page {
		min-height: calc(100vh - 88rpx);
		// min-height: 100vh;
		background: #F0F2F5;


		.Filter {
			width: 750rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 0rpx;
			display: flex;
			// margin-bottom: 10rpx;
		}

		.content {
			width: 750rpx;
			// background: #FFFFFF;

			.item {
				margin-bottom: 20rpx;
				background: #FFFFFF;
			}

			.item-top {
				width: 750rpx;
				// height: 196rpx;
				background: #FFFFFF;
				border-radius: 0rpx;
				padding: 30rpx 30rpx 0 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.item-content {
				display: flex;
				padding: 20rpx 30rpx 0 30rpx;
			}

			.item-state {
				width: 128rpx;
				height: 44rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #304156;
				line-height: 44rpx;
				text-align: center;
				// padding:30rpx  30rpx 0 30rpx;
			}

			.item-state1 {
				width: 80rpx;
				height: 44rpx;
				background: #FFE8BF;
				border-radius: 8rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FE8D02;
				line-height: 44rpx;
				text-align: center;
				margin-left: 20rpx;
				// margin-bottom: 20rpx;
			}

			.item-bottom {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 30rpx;

				.item-bottom-yuan {
					display: flex;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					.yuan {
						width: 180rpx;
						height: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #FE8D03;
						line-height: 28rpx;
					}
				}

				.item-bottom-city {
					display: flex;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					.city {
						width: 56rpx;
						height: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #555555;
						line-height: 28rpx;
					}
				}

				.item-bottom-time {
					display: flex;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					.time {
						width: 160rpx;
						height: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #555555;
						line-height: 28rpx;
					}
				}


			}
		}

		.item-heng {
			width: 750rpx;
			padding: 0 30rpx;

			.heng {
				// width: 690rpx;
				height: 1rpx;
				background: #DDDDDD;
				border-radius: 0rpx;
			}
		}

		.item-btn {
			width: 750rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 0rpx;
			padding-top: 20rpx;

			.qxsc {
				width: 112rpx;
				height: 40rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #F43107;
				line-height: 48rpx;
				margin: 0 auto;
			}
		}
	}
</style>